.preloader {
	background-color: $white;
	width: 100%;
	height: 100%;
	position: fixed;
	z-index: 1000;

	.loader {
		width: 115px;
		height: 100px;
		position: absolute;
		left: 50%;
		top: 50%;
		@include center-by-translating();
	}

	.gear {
		position: absolute;
		z-index: -10;
		width: 40px;
		height: 40px;
		animation: spin 5s infinite;
	}

	.two {
		left: 40px;
		width: 80px;
		height: 80px;
		animation: spin-reverse 5s infinite;
	}

	.three {
		top: 45px;
		left: -10px;
		width: 60px;
		height: 60px;
	}
}



@keyframes spin {
  50% {
    transform: rotate(360deg);
  }
}

@keyframes spin-reverse {
  50% {
    transform: rotate(-360deg);
  }
}



